<template>
  <div>
    <a-tooltip>
      <template #title>prompt text</template>
      Tooltip will show when mouse enter.
    </a-tooltip>
    <a-button type="primary"
              class="mr-10px"
              @click="showModal">Open Modal</a-button>
    <a-modal v-model:visible="visible"
             title="Basic Modal"
             @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>

    <a-popconfirm title="Are you sure delete this task?"
                  ok-text="Yes"
                  cancel-text="No">
      <a-button type="primary"
                class="mr-10px">气泡框</a-button>
    </a-popconfirm>

    <a-button type="primary"
              @click="info">Display normal message</a-button>
  </div>

  <div class="w-400px">
    <a-alert message="Success Tips"
             type="success"
             show-icon />
    <a-alert message="Success Tips"
             description="Detailed description and advices about successful copywriting."
             type="success"
             show-icon />
  </div>

  <div>
    <a-progress :percent="50"
                :show-info="false" />

    <div>
      <div style="margin-bottom: 16px">
        showLine:
        <a-switch v-model:checked="showLine" />
        <br />
        <br />
        showIcon:
        <a-switch v-model:checked="showIcon" />
      </div>
      <a-tree :show-line="showLine"
              :show-icon="showIcon"
              :default-expanded-keys="['0-0-0']"
              :tree-data="treeData"
              @select="onSelect">
        <template #icon>
          <carry-out-outlined />
        </template>
        <template #title="{ dataRef }">
          <template v-if="dataRef.key === '0-0-0-1'">
            <div>multiple line title</div>
            <div>multiple line title</div>
          </template>
          <template v-else>{{ dataRef.title }}</template>
        </template>
        <template #switcherIcon="{ dataRef, defaultIcon }">
          <SmileTwoTone v-if="dataRef.key === '0-0-2'" />
          <component :is="defaultIcon"
                     v-else />
        </template>
      </a-tree>
    </div>
  </div>

  <div>
    <a-transfer v-model:target-keys="targetKeys"
                v-model:selected-keys="selectedKeys"
                :data-source="mockData"
                :titles="['Source', 'Target']"
                :render="item => item.title"
                :disabled="disabled"
                @change="handleChange"
                @selectChange="handleSelectChange"
                @scroll="handleScroll" />
    <a-switch v-model:checked="disabled"
              un-checked-children="enabled"
              checked-children="disabled"
              style="margin-top: 16px" />
  </div>
  <div>
    <a-form :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed">
      <a-form-item label="Username"
                   name="username"
                   :rules="[{ required: true, message: 'Please input your username!' }]">
        <a-input v-model:value="formState.username" />
      </a-form-item>

      <a-form-item label="Password"
                   name="password"
                   :rules="[{ required: true, message: 'Please input your password!' }]">
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item name="remember"
                   :wrapper-col="{ offset: 8, span: 16 }">
        <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary"
                  html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import type { TreeProps } from 'ant-design-vue'
import { message } from 'ant-design-vue'
const content = ref('1234')
const visible = ref<boolean>(false)
const showModal = () => {
  visible.value = true
}

const handleOk = (e: MouseEvent) => {
  console.log(e)
  visible.value = false
}

const info = () => {
  message.info('This is a normal message')
}

const showLine = ref<boolean>(true)
const showIcon = ref<boolean>(false)
const treeData = ref<TreeProps['treeData']>([
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        children: [
          { title: 'leaf', key: '0-0-0-0' },
          {
            key: '0-0-0-1'
          },
          { title: 'leaf', key: '0-0-0-2' }
        ]
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ title: 'leaf', key: '0-0-1-0' }]
      },
      {
        title: 'parent 1-2',
        key: '0-0-2',
        children: [
          { title: 'leaf 1', key: '0-0-2-0' },
          {
            title: 'leaf 2',
            key: '0-0-2-1'
          }
        ]
      }
    ]
  },
  {
    title: 'parent 2',
    key: '0-1',
    children: [
      {
        title: 'parent 2-0',
        key: '0-1-0',
        children: [
          { title: 'leaf', key: '0-1-0-0' },
          { title: 'leaf', key: '0-1-0-1' }
        ]
      }
    ]
  }
])
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info)
}

interface MockData {
  key: string
  title: string
  description: string
  disabled: boolean
}
const mockData: MockData[] = []
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`,
    disabled: i % 3 < 1
  })
}

const oriTargetKeys = mockData
  .filter((item) => +item.key % 3 > 1)
  .map((item) => item.key)
const disabled = ref<boolean>(false)

const targetKeys = ref<string[]>(oriTargetKeys)

const selectedKeys = ref<string[]>(['1', '4'])

const handleChange = (
  nextTargetKeys: string[],
  direction: string,
  moveKeys: string[]
) => {
  console.log('targetKeys: ', nextTargetKeys)
  console.log('direction: ', direction)
  console.log('moveKeys: ', moveKeys)
}
const handleSelectChange = (
  sourceSelectedKeys: string[],
  targetSelectedKeys: string[]
) => {
  console.log('sourceSelectedKeys: ', sourceSelectedKeys)
  console.log('targetSelectedKeys: ', targetSelectedKeys)
}
const handleScroll = (direction: string, e: Event) => {
  console.log('direction:', direction)
  console.log('target:', e.target)
}

interface FormState {
  username: string
  password: string
  remember: boolean
}

const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true
})
const onFinish = (values: any) => {
  console.log('Success:', values)
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}
</script>

<style scoped>
</style>
